<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Overlay Widgets Test</title>

<script src="../../build/seed.js"></script>

<link rel="stylesheet" href="../../build/cssbase/base-min.css"/>
<link rel="stylesheet" href="assets/cool.css"/>
<style>
    body {
        padding: 20px 50px 50px;
    }

    h2 {
        margin: 10px 0 10px -20px;
        padding: 5px 10px;
        font-size: 14px;
        font-weight: normal;
        background: #F2F2F2;
    }

    p.code-switch {
        color: #09f;
        cursor: pointer;
        margin-top: 10px;
    }

    pre.code {
        color: #444;
        cursor: auto;
        border-left: 2px solid #7F96AA;
        margin-top: 5px;
        padding: 0 10px 20px 10px;
        font-size: 14px;
    }

    .ks-overlay {
        border: 1px solid red;
    }
</style>
</head>

<body>

<h2>overlay - 异步加载</h2>

<button id="btn1">Show</button>
<button id="btn2">Hide</button>

<script>
    //最简单好用的！
    var node = document.createElement("div");
    node.innerHTML = "动态添加节点";
    KISSY.use("overlay", function(S) {
        var popup = new S.Overlay({
            content:node,
            width: 300,
            height: 200,
            align: {
                node: '#btn1',
                points: ['tr', 'tl'],
                offset: [50, 0]
            }
        });
        S.one('#btn1').on('click', function() {
            popup.show();
        });
        S.one('#btn2').on('click', function() {
            popup.hide();
        });

    });
</script>
<p class="code-switch">显示源码</p>

<script>
    KISSY.use("core",function() {
       
        var S = KISSY, DOM = S.DOM,
                SHOW_CODE = '显示源码', HIDE_CODE = '隐藏源码';

        S.all('p.code-switch').each(function(p) {
            p.on('click', function() {
                var showing = (p.text() === SHOW_CODE),
                        next = p.next(),
                        pre = next;

                if (next[0].nodeName !== 'PRE') {
                    pre = S.Node('<pre>');

                    pre.attr('class', 'code')
                            .html(p.prev().html());

                    if (S.UA.ie) {
                        pre.html(pre.html() + '<br />// 请用非 ie 内核浏览器查看。');
                    }

                    DOM.insertAfter(pre[0], p[0]);
                }

                pre.css('display', showing ? 'block' : 'none');
                p.html(showing ? HIDE_CODE : SHOW_CODE);
            });
        });
    });
</script>
</body>
</html>
